<script lang="ts">
    import { Progress } from "../Progress";
    import { useClassList } from "../utils/useClassList";
    import type { WordCountProps } from "./WordCount";

    const props: WordCountProps = $props();
    const overflow = $derived.by(() => {
        const val = props.value ?? "";
        return val.length > props.total;
    });
    const overNumber = $derived.by(() => {
        const val = props.value ?? "";
        return props.overflow && overflow ? val.length - props.total : val.length;
    });
    const percent = $derived.by(() => {
        const val = props.value ?? "";
        return Math.min((val.length / props.total) * 100, 100);
    });
    const radius = props.radius ?? 10;
    const classList = $derived(useClassList(props, "cm-word-count"));
</script>

<div class={classList} style={props.style}>
    {#if props.circle}
        <Progress type="circle" {radius} strokeWidth={1} hidePercent value={percent} />
    {:else}
        <span class={{ "cm-word-count-prefix": true, "cm-word-count-overflow": overflow }}>
            {#if overflow}
                {props.prefixOverflow}
            {:else}
                {props.prefix}
            {/if}
        </span>
        <span class={overflow ? "cm-word-count-overflow" : ""}>{overNumber}</span>
        <span>/</span>
        <span>{props.total}</span>
        <span class={{ "cm-word-count-suffix": true, "cm-word-count-overflow": overflow }}>
            {#if overflow}
                {props.suffixOverflow}
            {:else}
                {props.suffix}
            {/if}
        </span>
    {/if}
</div>
